import React, { Component } from 'react';
import { Layout, Tabs } from 'antd';
import '../less/index.less';
import LayoutView from './LayoutView';
import BaseView from './BaseView';
import { inject, observer } from 'mobx-react';
import {  LayoutOutlined, UserOutlined } from '@ant-design/icons';

const { Content } = Layout;

@inject('store')
@observer
class Root extends Component {
  render() {
    const { store } = this.props;
    return (
      <Layout className='layout'>
        <Content className='content'>
          <Tabs style={{ height: '100%' }} tabBarStyle={{ width: 150 }} tabPosition='left'>
            <Tabs.TabPane tab={<span><LayoutOutlined/>系统布局</span>} key="1"><LayoutView/></Tabs.TabPane>
            <Tabs.TabPane tab={<span><UserOutlined/>基本设置</span>} key="2"><BaseView/></Tabs.TabPane>
          </Tabs>
        </Content>
      </Layout>

    );
  }
}

export default Root;
